<template>
  <div>
    <van-tabs v-model="activeName" @click="onCategory">
      <van-tab
        :title="item.name"
        :name="item.id"
        v-for="item in brotherCategory"
        :key="item.id"
        @click="onCategory(item.id)"
      >
        <div class="title">{{ currentCategory.name }}</div>
        <div class="front_name">{{ currentCategory.front_name }}</div>
      </van-tab>
    </van-tabs>
    <Goods :goodsList="goodsList" @addN="addN"></Goods>
  </div>
</template>

<script>
import Goods from '../components/Goods.vue'
import { GetGoodsCategory, GetList } from "../request/api";
export default {
    components:{
Goods
    },
  data() {
    return {
      activeName: 1005000,
      brotherCategory: [],
      currentCategory: [],
      goodsList:[]
    };
  },
  async created() {
    let id = this.$route.query.id;
    this.activeName = Number(id);
    console.log(id);
    await GetGoodsCategory({
      id,
    }).then((res) => {
      console.log(res);
      this.brotherCategory = res.data.brotherCategory;
      this.currentCategory = res.data.currentCategory;
    });
    await GetList({
        categoryId: id,
        page: 1,
        size: 20,
      }).then((res) => {
        console.log("111", res);
        if(!res.errno===0)return;
        this.goodsList=res.data.goodsList;
      });
  },
  methods: {
    onCategory(id) {
      console.log(id);
      //栏目数据
      GetGoodsCategory({
        id
      }).then((res) => {
        console.log(res);
        this.brotherCategory = res.data.brotherCategory;
        this.currentCategory = res.data.currentCategory;
      });
      GetList({
        categoryId: id,
        page: 1,
        size: 20,
      }).then((res) => {
        // console.log("111", res);
        if(!res.errno===0)return;
        this.goodsList=res.data.goodsList;
      });
    },
    addN(id) {
      this.$router.push(`/details?id=${id}`);
      // console.log();
    }
  },
};
</script>
 
<style lang = "less" scoped>
.title {
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
}
.front_name {
  text-align: center;
  color: #999;
}
</style>